<template>
    <div :style="{height:heightY}"
         style="float:left;width: 78%;margin-left: 10px;  overflow-x: hidden;
          overflow-y: auto;"
    >
      <div style="height: 50px;background-color: white">
        <el-button type="primary" plain icon="el-icon-download" style="float: right;margin: 10px 10px 10px 0"
                   @click="download">下载
        </el-button>
        <el-button type="primary" plain icon="el-icon-tickets" style="float: right;margin: 10px 20px 10px 0"
                   @click="selectList">统计
        </el-button>
      </div>
  
      <el-main style="background-color: white;width: 100%;overflow: auto" v-loading="loading" element-loading-background="rgba(0, 0, 0, 0.5)"
               element-loading-text="数据加载中">
        <div>
          <template>
            <h2 style="text-align: center">省直单位领导班子配备情况</h2>
            <vxe-table
              show-overflow
              :data="tableData"
              :height="heightMainYNew"
              border
              :span-method="arraySpanMethod"
              ref="mytableOneOne"
              style="width: 100%"
              :resizable="true"
              highlight-current-row
              :header-cell-style="{fontWeight : 'bold',color: '#666', fontFamily: 'Arial',fontSize:'16px'}">
                <vxe-column
                  title="序号" align="center" field="sindex">
                </vxe-column>
                <vxe-column
                  title="单位" align="center" field="ORG_NAME" >
                </vxe-column>
                <vxe-column
                  title="领导班子" align="center">
                  <vxe-column  title="领导班子数" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.LDBZS == undefined ? "1" : scope.row.LDBZS }}
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="配备46岁以下干部的班子数" align="center" field="PBSLGBBZS">
                  </vxe-column>
                  <vxe-column
                    title="占比" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.PBNGBBZSZB == undefined ? "--" : scope.row.PBSLGBBZSZB }}
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="配备女干部的班子数" align="center" field="PBNGBBZS">
                  </vxe-column>
                  <vxe-column
                    title="占比" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.PBNGBBZSZB == undefined ? "--" : scope.row.PBNGBBZSZB }}
                    </template>
                  </vxe-column>
                </vxe-column>
  
                <vxe-column
                  title="配备46岁以下干部" align="center">
                  <vxe-column
                    title="配备46岁以下干部数" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '1', '46csny',scope.row.ORG_NAME,'配备46岁以下干部数')"
                                 size="small">{{scope.row.SLGB}}</el-button>
                      <p v-else>{{scope.row.SLGB}}</p>
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="正职" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '2', '46csny',scope.row.ORG_NAME,'配备46岁以下干部正职数')"
                                 size="small">{{scope.row.SLGBZZ}}</el-button>
                      <p v-else>{{scope.row.SLGBZZ}}</p>
                    </template>
                  </vxe-column>
                </vxe-column>
  
                <vxe-column
                  title="配备41岁以下干部数" align="center">
                  <template slot-scope="scope">
                    <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                               @click="detailList(scope.row.ORG_ID, '1', '41csny',scope.row.ORG_NAME,'配备41岁以下干部数')"
                               size="small">{{scope.row.SYGB}}</el-button>
                    <p v-else>{{scope.row.SYGB}}</p>
                  </template>
                </vxe-column>
  
                <vxe-column
                  title="配备女干部" align="center">
                  <vxe-column
                    title="配备女干部人数" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '1', 'gender',scope.row.ORG_NAME,'配备女干部人数')"
                                 size="small">{{scope.row.NGB}}</el-button>
                      <p v-else>{{scope.row.NGB}}</p>
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="正职" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '2', 'gender',scope.row.ORG_NAME,'配备女干部正职数')"
                                 size="small">{{scope.row.NGBZZ}}</el-button>
                      <p v-else>{{scope.row.NGBZZ}}</p>
                    </template>
                  </vxe-column>
                </vxe-column>
  
                <vxe-column
                  title="配备少数民族干部" align="center">
                  <vxe-column
                    title="配备少数民族干部数" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '1', 'nation',scope.row.ORG_NAME,'配备少数民族干部数')"
                                 size="small">{{scope.row.SSMZGB}}</el-button>
                      <p v-else>{{scope.row.SSMZGB}}</p>
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="正职" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '2', 'nation',scope.row.ORG_NAME,'配备少数民族干部正职数')"
                                 size="small">{{scope.row.SSMZGBZZ}}</el-button>
                      <p v-else>{{scope.row.SSMZGBZZ}}</p>
                    </template>
                  </vxe-column>
                </vxe-column>
  
                <vxe-column
                  title="配备党外干部班子" align="center">
                  <vxe-column
                    title="配备党外干部班子数" align="center" field="PBDWGBBZS">
                  </vxe-column>
                  <vxe-column
                    title="占比" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.PBDWGBBZSZB == undefined ? "--" : scope.row.PBDWGBBZSZB }}
                    </template>
                  </vxe-column>
                </vxe-column>
  
                <vxe-column
                  title="配备党外干部" align="center">
                  <vxe-column
                    title="配备党外干部人数" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '1', 'zzmm',scope.row.ORG_NAME,'配备党外干部人数')"
                                 size="small">{{scope.row.DWGB}}</el-button>
                      <p v-else>{{scope.row.DWGB}}</p>
                    </template>
                  </vxe-column>
                  <vxe-column
                    title="正职" align="center">
                    <template slot-scope="scope">
                      <el-button v-if="scope.row.ORG_TYPE == '2'" type="text"
                                 @click="detailList(scope.row.ORG_ID, '2', 'zzmm',scope.row.ORG_NAME,'配备党外干部正职数')"
                                 size="small">{{scope.row.DWGBZZ}}</el-button>
                      <p v-else>{{scope.row.DWGBZZ}}</p>
                    </template>
                  </vxe-column>
                </vxe-column>
  
  
            </vxe-table>
          </template>
  
        </div>
      </el-main>
  
  
      <div>
        <index-add v-if="showIndex" ref="echartsIndex" @index="initData"/>
        <detail-add v-if="showTypeList" ref="dialogSumCardreList" @onSumCardreList="initData"/>
        <sumCardreType-list v-if="showSumCardreTypeList" ref="sumCardreTypeList" @sumCardreTypeList="init"/>
      </div>
  
    </div>
  
  </template>
  
  <script>
  import $ from 'jquery'
  import echartsIndex from '@/views/young/statistics/statisticsOne/statisticsOneOneEcharts'
  import detailAlert from '@/views/young/statistics/statisticsUintList'
  import sumCardreTypeList from '@/views/young/statistics/statisticsSumList'
  import {
    statisticsOneOneUintList,
    getPersonList,
    statisticsOneOneSumList,
    exportExeclForZJBA,
    statisticsUintName,
    statisticsList
  } from '@/api/young/echarts/cadre/cadre'
  import {statisticsOneList, getPersonOneList} from '@/api/young/echarts/cadre/cadreNew'
  import store from '@/store'
  import render from "@/components/Generator/render/render";
  
  export default {
    components: {
      'index-add': echartsIndex,
      'detail-add': detailAlert,
      'sumCardreType-list': sumCardreTypeList
    },
    data() {
      return {
        tableData: [],
        classStr: [],
        paramesList: [],
        showTypeList: false,
        perPage: 200,
        totalItems: 0,
        showSumCardreTypeList: false,
        currentPage: 1,
        showIndex: false,
        heightY: window.innerHeight - 150 + 'px',
        heightMainYNew: window.innerHeight - 230 + 'px',
        pageNumber: 0,
        heji: '',
        total: 0,
        loading: false
  
      }
    },
    mounted() {
      // this.initData()
    },
    methods: {
      clickfunction(){
        alert("222")
      },
      // 弹出干部类型列表detailList 参数 1：机构id 参数， 2：干部类型（1234分别代表四种类型），参数 3：领导班子正职 类型（列）: 0，：人数 类型（列） null
      detailList(b0111, type, LeaderType, b0101, personType) {
        var alertPar = b0101 + '--' + personType
        var that = this
        //  that.loading = true
        that.paramesList = []
        var uintName = ''
        var par_sjzx = {
          'userId': store.getters.user_id.toString(),
          'token': store.getters.token.toString(),
          'system': 'datacenter',
          'orgId': b0111,
        }
        if (type != '') {
          if (LeaderType == '46csny') {   // 46岁以下干部数
            par_sjzx['csny'] = '46'
          } else if (LeaderType == '41csny') { // 41岁以下干部数
            par_sjzx['csny'] = '41'
          } else if (LeaderType == 'gender') { // 女
            par_sjzx['gender'] = '2'
          } else if (LeaderType == 'nation') { // 少数民族
            par_sjzx['nation'] = '01'
          } else if (LeaderType == 'zzmm') { // 党外干部
            par_sjzx['zzmm'] = '01'
          }
  
          if (type == '2') {  // 正职数
            par_sjzx['leaderCategory'] = '1'
          }
        }
        par_sjzx['showType'] = 'one'
        that.showTypeList = true
        that.$nextTick(() => {
          that.$refs.dialogSumCardreList.init(par_sjzx, alertPar)
        })
      },
  
      async initData(node) {
        this.selectList(node)
      },
      selectList(node) {
        //var pageNumber;
        const that = this
        that.loading = true
        // 组装分页参数
        const params = {
          // 'page': this.currentPage, // 当前多少页
          // 'rows': this.perPage, // 每页显示数据
          // totals:this.totalItems
  
        }
        const params_sjzx = {
          'userId': store.getters.user_id.toString(),
          'token': store.getters.token.toString(),
          'system': 'datacenter',
        }
        node.forEach((item) => {
          if (item == ('10067')) {
            params_sjzx['reportType'] = '100067'
          }else if(item == ('10068')){
            params_sjzx['reportType'] = '100068'
          }else if (item == ('10069')){
            params_sjzx['reportType'] = '100069'
          }
        })
  
        statisticsOneList(params_sjzx).then(data => {
          console.info(data, "--")
          this.tableData = data.resultdata;
          let i = 1;
          this.tableData = this.tableData.map(item => {
            if (item.ORG_TYPE == '0' || item.ORG_TYPE == '1') {
              item.sindex = item.ORG_NAME;
              item.ORG_NAME = '';
            } else {
              item.sindex = i;
              i += 1;
            }
            return item;
          })
          this.loading = false
        })
        this.$nextTick(() => {
          let clHeight = window.innerHeight - 230 - document.getElementsByClassName("el-table__header-wrapper")[0].clientHeight ;
          setTimeout(()=>{
            document.getElementsByClassName('el-table__body-wrapper')[0].style.cssText = 'height:'+ clHeight +'px !important;'
          },100)
          this.$refs.mytableOneOne.recalculate()
        })
      },
      download() {
        var that = this
        if (that.tableData.length == 0) {
          that.$message({
            message: '请点击统计后再下载',
            type: 'warning'
          })
          return
        }
        const params = {
          'personList': this.tableData,
          'fileName': '省直单位领导班子配备情况.xlsx',
          'type': "1"
        }
        exportExeclForZJBA(params).then(function (result) {
        })
      },
  
      arraySpanMethod({row, column, rowIndex, columnIndex}) {
        if ((row.ORG_TYPE == "0" || row.ORG_TYPE == "1") && columnIndex == 0) {
          return { rowspan: 1, colspan: 2 }
        } else if ((row.ORG_TYPE == "0" || row.ORG_TYPE == "1") && columnIndex == 1) {
          return { rowspan: 0, colspan: 0 }
        }
      },
  
    }
  
  }
  </script>
  <style scoped>
  .mytableOneOne {
    width: 100%;
    border-top: 1px solid #DCDFE6;
    border-right: 1px solid #DCDFE6;
    border-spacing: 0; /*去掉单元格间隙*/
  }
  .mytableOneOne tbody{
    width: 100%;
  }
  .mytableOneOne .borderNone {
    border-left: none;
  }
  
  .mytableOneOne > thead > tr {
    background-color: #f5f7fa;
  }
  .mytableOneOne td {
    word-wrap: break-word;
    font-size: 14px;
    text-align: center;
    padding: 5px 10px;
    border-bottom: 1px solid #DCDFE6;
    border-left: 1px solid #DCDFE6;
  }
  >>>.vxe-header--row{
    height: 10px;
    background:#F5F7FA;
  }
  >>>.vxe-cell--label{
    font-size: 12px;
    white-space:break-spaces;
  }
  >>>.vxe-header--column .vxe-cell--title{
    font-size:15px;
  }
  </style>
  